import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/views/Login";
import Index from "@/views/Index";
import Home from "@/views/Home";
import store from "@/store";
import {getUserMenuAndAuth} from "@/api/login";
import createRoute from "vue-router";

Vue.use(VueRouter)

const routes = [
    {
        path: '/login',
        name: 'login',
        component: Login
    },
    {
        path: '/',
        name: 'home',
        redirect: '/index',
        component: Home,
        children: [
            {
                path: '/index',
                name: 'Index',
                meta: {
                    title: '首页'
                },
                component: Index
            },
        ]
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

router.beforeEach((to, from, next) => {
    // 获取到是否为第一个加载路由
    let hasRoutes = store.state.menus.hasRoutes;
    // 获取token
    let token = localStorage.getItem('token');
    console.log(to.path === '/login')
    // 如果访问的是登录页面，直接放行
    if (to.path === '/login') {
        next()
        return
    }
    // 如果token为空 没有登录 跳转到登录页面
    if (!token) {
        next({path: '/login'})
        return;
    }
    // 如果不是第一次动态加载路由（已经登录 并且加载过路由） 无需再次加载 直接放行
    if (hasRoutes) {
        next();
        return;
    }
    // 能够执行到这里（代表 已经 登录 并且是第一次加载路由）
    // 获取用户菜单以及权限接口（发送请求）
    getUserMenuAndAuth().then(res => {
        console.log('获取用户菜单以及权限接口', res.data.data);
        // 拿到用户菜单
        store.commit('SET_MENU_LIST', res.data.data.menus)
        // 拿到用户权限
        store.commit('SET_AUTH_LIST', res.data.data.auths)

        // 动态绑定路由
        // 获取当前的路由配置
        let newRoutes = router.options.routes;
        // 置空之前的动态配置
        newRoutes[1].children = []
        console.log('newRoutes前', newRoutes)

        res.data.data.menus.forEach(menu => {
            // 判断是否有子菜单 有子菜单转成路由
            if (menu.children) {
                menu.children.forEach(e => {
                    // 转成路由
                    let router = menuToRouter(e);
                    // 把路由添加到路由管理器  因为要添加到home路由下的children中 所有newRoutes[1].children
                    if (router) newRoutes[1].children.push(router)
                })
            }
        })
        // 将新生成的路由逐个添加到现有路由配置中
        newRoutes.forEach(route => {
           router.addRoute(route);
        });

        console.log('newRoutes后',newRoutes)
        // 设置路由是否已经加载过
        hasRoutes = true;
        store.commit('SET_HAS_ROUTES', hasRoutes)

        next({path: to.path});
    })
})


// 导航转成路由
function menuToRouter(menu) {
    // 如果 component为空 无需转换
    if (!menu.component) return null

    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            icon: menu.icon,
            title: menu.title
        },
    };
    route.component = () => import ('@/views/' + menu.component + '.vue')
    return route
}

export default router
